<script setup>
import {
  Search,
  RefreshLeft,
  Plus,
  Bottom,
  Top,
  Remove,
} from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import request from "../utils/request.js";
import { ElMessage } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";
import axios from "axios";

const data = reactive({
  // table表格展示的数据
  tableData: [],
  // 添加编辑弹框的数据
  form: {
    // 下面注释的代码可写可不写
    // username: "",
    // password: "",
  },
  borrowData: [],
});

// 分页功能，模糊查询
const current = ref(1);
const size = ref(5);
const total = ref(0);
const name = ref("");
const showUsers = () => {
  request
    .get("/selectUsersByPage", {
      params: {
        name: name.value,
        current: current.value,
        size: size.value,
      },
    })
    .then((res) => {
      // res不为空展示数据，为空证明未登录或者过期
      if (res) {
        // 将分页查询到的数据存入数组中
        // console.log(res);
        data.tableData = res.data.records;
        total.value = res.data.total;
      }
    });
};

showUsers();
// onMounted(() => {
//   showUsers();
// });

// function next_click(row) {
//   current.value = row;
//   // console.log();
//   showUsers();
// }
// function prev_click(row) {
//   current.value = row
//   showUsers();
// }

// 箭头函数，和上面定义方式作用相同

const next_click = (row) => {
  current.value = row;
  // console.log();
  showUsers();
};

const prev_click = (row) => {
  current.value = row;
};

const handleCurrentChange = (row) => {
  current.value = row;
  showUsers();
};

// 重置
const reset = () => {
  name.value = "";
  showUsers();
};

// 根据id删除用户
const delUser = (row) => {
  request.get("/delUserById/" + row.id).then((res) => {
    if (res.code === "200") {
      ElMessage.success(res.msg);
      // 刷新数据
      showUsers();
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 批量删除，利用table组件的多选功能
const delIds = reactive([]); //用于记录要删除的用户的id
const multipleSelection = ref([]); //配合下面的函数使用

// 该函数会记录选择的每行的对象，将对象的id提取出成为一个数组，然后点击批量删除的时候将数组传递给后端进行删除
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  delIds.value = multipleSelection.value.map((v) => v.id);
};
const delUsers = () => {
  if (!delIds.value) {
    ElMessage.error("请先选择要删除的数据");
  } else {
    request.post("/delUserByIds", delIds.value).then((res) => {
      if (res.code === "200") {
        ElMessage.success(res.msg);
        showUsers();
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
};

const dialogTableVisible = ref(false);

const showBorrow = (userId) =>{
  dialogTableVisible.value = true
  request.get("/selectAllByUserId/" + userId).then((res)=>{
        if(res.code === "200"){
            data.borrowData = res.data
        }
    })
} 
</script>


<template>
  <div>
    <!-- 搜索重置添加 -->
    <div class="right_top">
      <el-input
        v-model="name"
        placeholder="请输入"
        style="width: 300px; padding-right: 5px"
      />
      <!-- 模糊查询，利用双向绑定的name -->
      <el-button type="primary" @click="showUsers">
        <el-icon><Search /></el-icon>
        <span>搜索</span>
      </el-button>
      <!-- 重置 -->
      <el-button type="warning" @click="reset">
        <el-icon><RefreshLeft /></el-icon>
        <span>重置</span>
      </el-button>
    </div>
    <div style="margin: 10px 0">
      <el-button type="danger" @click="delUsers">
        <el-icon><Remove /></el-icon>
        <span>批量删除</span>
      </el-button>
    </div>
    <!-- table表格 -->
    <div class="right_main">
      <el-table
        :data="data.tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="头像" width="200">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <img
                :src="scope.row.photo"
                alt=""
                style="width: 100px; height: 80px"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="180" />
        <el-table-column prop="sex" label="性别" width="100" />
        <!-- <el-table-column prop="sex" label="Sex" width="280" /> -->
        <!-- 自定义列表格 -->
        <el-table-column label="操作">
          <!-- 最新版插槽的写法 -->
          <template #default="scope">
            <el-popconfirm title="确定删除？" @confirm="delUser(scope.row)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button text @click="showBorrow(scope.row.id)" style="color:blue">
              借阅信息
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        small
        background
        :pager-count="5"
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        @current-change="handleCurrentChange"
        class="mt-4"
        @next-click="next_click"
        @prev-click="prev_click"
      />
    </div>

    <div class="admin_borrow">
      <el-dialog v-model="dialogTableVisible" title="借阅信息">
        <el-table :data="data.borrowData" height="400px">
          <el-table-column prop="bookName" label="书名" width="150" />
          <!-- 时间格式存在问题 -->
          <el-table-column prop="timeStart" sortable label="借书时间" />
          <el-table-column label="还书时间">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="color: red">{{ scope.row.timeEnd }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="状态" width="150">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span v-if="scope.row.status === 0" style="color: green"
                  >借阅中</span
                >
                <span v-if="scope.row.status === 2" style="color: red"
                  >超时未还</span
                >
                <span v-if="scope.row.status === 1">已还</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<style>
.page {
  padding-top: 20px;
}
</style>